<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>学生列表</title>
        <link rel="stylesheet" href="/css/list.css">
    </head>
    <body>

        {% include "commons/header.njk" %}

        <!-- 使用 if ... else ... endif 标签控制页面显示的内容  -->
        {% if reason %}
            <div class="error">{{ reason }} </div>
        {% else %}
            <div class="student-list">
                    <div class="student">
                        <span>序号</span>
                        <span>姓名</span>
                        <span>性别</span>
                        <span>出生日期</span>
                        <span>操作</span>
                    </div>
                <!-- 使用 nunjucks 的 for ... else ... endfor 标签来处理数组 -->
                {% for stu in students %}
                    <div class="student">
                        <span>{{ loop.index }}</span>
                        <span>{{ stu.name }}</span>
                        <span>{{ stu.gender }}</span>
                        <span>{{ stu.birthdate.toLocaleDateString() }}</span>
                        <span>
                            <a href="/student/edit/{{stu.id}}">编辑</a>
                            <a href="/student/remove/{{stu.id}}">删除</a>
                        </span>
                    </div>
                {% else %}
                    <div>暂无学生</div>
                {% endfor%}
            </div>
        {% endif%}
        <div class="links">
            <a href="/student/add">添加学生</a>
        </div>

        {% include "commons/footer.njk" %}

    </body>
</html>